import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
// import { h } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { updateGoodState } from '/@/api/goods';
import { Tag, Tabs } from 'ant-design-vue';
const TabPane = Tabs.TabPane;
import { StatusEnum, statusColorMap, statusTextMap } from './enums/statusEnum';
export const columns: BasicColumn[] = [
  {
    title: '商品ID',
    dataIndex: 'goods_id',
    width: 100,
  },
  {
    title: '商品图片',
    dataIndex: 'goods_image',
    slots: { title: 'customImg', customRender: 'img' },
    width: 100,
  },
  {
    title: '商品名称',
    dataIndex: 'goods_name',
    align: 'left',
    width: 200,
  },
  {
    title: '商品价格',
    dataIndex: 'goods_price_min',
    width: 100,
  },
  {
    title: '总销量',
    dataIndex: 'goods_sales',
    width: 100,
  },
  {
    title: '库存总量',
    dataIndex: 'stock_total',
    width: 100,
  },

  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    slots: { title: 'customStatus', customRender: 'status' },
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      const tagText = statusTextMap.get(record.status);
      const tagColor = statusColorMap.get(record.status);
      const style = { cursor: 'pointer' };
      const handle = () => {
        record.pendingStatus = true;
        const newStatus = record.status === StatusEnum.ACTIVE ? false : true;
        const { createMessage } = useMessage();
        updateGoodState({
          goodsIds: [record.goods_id],
          state: newStatus,
        })
          .then(() => {
            record.status = newStatus ? StatusEnum.ACTIVE : StatusEnum.UNACTIVE;
            createMessage.success(`修改状态成功`);
          })
          .catch(() => {
            createMessage.error('修改状态失败');
          })
          .finally(() => {
            record.pendingStatus = false;
          });
      };
      return (
        <Tag color={tagColor} onClick={handle} style={style}>
          {tagText}
        </Tag>
      );

      // return h(
      //   Tag,
      //   {
      //     color: record.status === 10 ? 'green' : 'red',
      //     style: ' cursor: pointer;',
      //     onClick() {
      //       record.pendingStatus = true;
      //   const newStatus = record.status === 10 ? 20 : 10;
      //   const { createMessage } = useMessage();
      //   updateGoodState({
      //     goodsIds: [record.goods_id],
      //     state: newStatus,
      //   })
      //     .then(() => {
      //       record.status = newStatus ? 10 : 0;
      //       createMessage.success(`修改状态成功`);
      //     })
      //     .catch(() => {
      //       createMessage.error('修改状态失败');
      //     })
      //     .finally(() => {
      //       record.pendingStatus = false;
      //     });
      //     },
      //   },
      //   () => (record.status === 10 ? '上架' : '下架'),
      // );
    },
  },
  {
    title: '排序',
    dataIndex: 'sort',
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 150,
  },
];
// 表格搜索框

export let tabs = [
  {
    label: '全部',
    value: 'all',
  },
  {
    label: '出售中',
    value: 'on_sale',
  },
  {
    label: '已下架',
    value: 'off_sale',
  },
  {
    label: '已售罄',
    value: 'sold_out',
  },
];
let reload = () => {};
export const searchFormSchema: FormSchema[] = [
  {
    field: 'listType',
    label: '',
    defaultValue: 'all',
    component: 'Input',
    colProps: { span: 24, offset: 0 },
    
    // componentProps
    render: ({ model, field }) => {
      const onTabClick = (e: ChangeEvent) => {
        model[field] = e;
        reload();
      };
      return (
        <Tabs activeKey={model[field]} onTabClick={onTabClick}>
          {tabs.map((tab) => (
            <TabPane key={tab.value} tab={tab.label} />
          ))}
        </Tabs>
      );
    },
  },
  {
    field: 'goodsName',
    label: '商品名称',
    component: 'Input',
    labelWidth: 80,
    colProps: { span: 5 },
    componentProps: ({ tableAction}) => {
      reload = tableAction.reload;
    },
  },
  {
    field: 'goodsNo',
    label: '商品编码',
    labelWidth: 80,
    component: 'Input',
    colProps: { span: 5 },
  },
  // TODO 暂时这个接口是没有实现的
  // {
  //   field: 'listType',
  //   label: '商品分类',
  //   component: 'Select',
  //   componentProps: {
  //     options: [
  //       { label:'出售中', value: 'on_sale' },
  //       { label:  '已下架', value: 'off_sale' },
  //       { label:  '已售完', value: 'sold_out' }
  //     ],
  //   },
  //   colProps: { span: 5 },
  // },
];
